import React, { useEffect, useState } from 'react';
import clsx from 'clsx';
import { Text, View, router } from '@ray-js/ray';
import { useActions, useProps } from '@ray-js/panel-sdk';
import { NavBar, Button, Icon } from '@ray-js/smart-ui';
import * as Raw from '@/utils/raw';
import Strings from '@/i18n';
import styles from './index.module.less';

const SCENE_LLIST = [
  {
    key: 1,
    label: `${Strings.getLang('livingRoom')}`,
    icon: require('@/res/icons/scene1.svg'),
    checkIcon: require('@/res/icons/scene1_black.svg'),
  },
  {
    key: 2,
    label: Strings.getLang('bedroom'),
    icon: require('@/res/icons/scene2.svg'),
    checkIcon: require('@/res/icons/scene2_black.svg'),
  },
  {
    key: 3,
    label: Strings.getLang('studyRoom'),
    icon: require('@/res/icons/scene3.svg'),
    checkIcon: require('@/res/icons/scene3_black.svg'),
  },
  {
    key: 4,
    label: Strings.getLang('dressingRoom'),
    icon: require('@/res/icons/scene4.svg'),
    checkIcon: require('@/res/icons/scene4_black.svg'),
  },
  {
    key: 5,
    label: Strings.getLang('bathroom'),
    icon: require('@/res/icons/scene5.svg'),
    checkIcon: require('@/res/icons/scene5_black.svg'),
  },
  {
    key: 6,
    label: Strings.getLang('childrenRoom'),
    icon: require('@/res/icons/scene6.svg'),
    checkIcon: require('@/res/icons/scene6_black.svg'),
  },
  {
    key: 7,
    label: Strings.getLang('hall'),
    icon: require('@/res/icons/scene7.svg'),
    checkIcon: require('@/res/icons/scene7_black.svg'),
  },
  {
    key: 8,
    label: Strings.getLang('office'),
    icon: require('@/res/icons/scene8.svg'),
    checkIcon: require('@/res/icons/scene8_black.svg'),
  },
  {
    key: 9,
    label: Strings.getLang('diningRoom'),
    icon: require('@/res/icons/scene9.svg'),
    checkIcon: require('@/res/icons/scene9_black.svg'),
  },
  {
    key: 10,
    label: Strings.getLang('cafe'),
    icon: require('@/res/icons/scene10.svg'),
    checkIcon: require('@/res/icons/scene10_black.svg'),
  },
  {
    key: 11,
    label: Strings.getLang('yogaStudio'),
    icon: require('@/res/icons/scene11.svg'),
    checkIcon: require('@/res/icons/scene11_black.svg'),
  },
];

export default function Custom(props) {
  // 选中的房间
  const [selectedScene, setSelectedScene] = useState();
  const scene = useProps(props => props.scene); // 场景
  const actions = useActions();
  const [deviceScene, setDeviceScene] = useState([]);

  useEffect(() => {
    const { currentScene, scene1, scene2, scene3, scene4 } = Raw.parseSceneRaw(
      String(scene).trim()
    );
    setDeviceScene([currentScene, scene1, scene2, scene3, scene4]);
  }, [scene]);

  const roomsWithDivider = [
    ...SCENE_LLIST.slice(0, 6),
    { type: 'divider' }, // 插入下划线
    ...SCENE_LLIST.slice(6),
  ];

  return (
    <>
      <NavBar
        leftText={Strings.getLang('applicationScene')}
        leftTextType="home"
        border={false}
        leftArrow
        onClickLeft={() => router.back()}
      />
      <View className={styles.container}>
        <View className={styles.wrap}>
          {roomsWithDivider.map((room: any, index) => {
            if (room.type === 'divider') {
              return <View key={`divider-${index}`} className={styles.fullWidthDivider} />;
            }
            // 如果场景中的房间是deviceScene中的房间，则禁用
            const isDisabled = deviceScene.includes(room.key);
            return (
              <View
                key={index}
                className={clsx(styles.item, {
                  [styles.selectedItem]: room.key === selectedScene,
                  [styles.disabled]: isDisabled,
                })}
                onClick={() => {
                  setSelectedScene(room.key);
                }}
              >
                <View className={styles.itemBox}>
                  <Icon name={room.key === selectedScene ? room.checkIcon : room.icon} size={40} />
                </View>
                <Text className="label">{room.label}</Text>
              </View>
            );
          })}
          <View className={styles.item} />
        </View>
        <View className={styles.footer}>
          <Button
            block
            onClick={() => {
              const cyDeviceScene = [...deviceScene];
              const { index } = props.location.query;
              cyDeviceScene[Number(index) + 1] = selectedScene;
              cyDeviceScene[0] = selectedScene;
              actions.scene.set(
                Raw.generateSceneRaw(
                  cyDeviceScene[0],
                  cyDeviceScene[1],
                  cyDeviceScene[2],
                  cyDeviceScene[3],
                  cyDeviceScene[4]
                )
              );
              router.back();
            }}
          >
            {Strings.getLang('submitText')}
          </Button>
        </View>
      </View>
    </>
  );
}
